<template>
  <el-container class="scp-container container-min-width" ref='container'>
    <el-scrollbar class="el-scrollbar-container">
    <el-header :style="{height: `${headerHeight}px`}">
      <BasicLayout>
        <Header></Header>
      </BasicLayout>
    </el-header>
    <BasicLayout>
      <RootMenu ref="rootMenu"></RootMenu>
    </BasicLayout>
    <el-row class="row-empty-5"></el-row>
    <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
    </el-container>
    </el-scrollbar>
  </el-container>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import store from '@/store'
import BasicLayout from '@/components/common/BasicLayout'
import RootMenu from '@/components/menu/RootMenu'
import Header from './common/Header'
export default {
  data () {
    return {
      clientHeight: document.documentElement.clientHeight,
      headerHeight: 90, // 头部高度
      // timer: null
    }
  },
  components: {Header, RootMenu, BasicLayout},
  computed: {
  },
  watch: {
  },
  created () {
    this.getMenuPermission()
    this.sysDictLoadByPaging()
    this.getWritePermission()
    // this.intervalSleep({
    //   cb: () => {
    //     this.getMenuPermission()
    //   },
    //   ms: 60 * 4 // 10分钟
    // })
  },
  mounted () {
    const that = this
    this.$nextTick(function () {
      // 首次加载
      that.mainPageHandleStyle()
    })
    // 挂载 reisze 事件 → 屏幕缩放时监听宽度变化
    window.addEventListener('resize', function () {
      return (() => {
        that.$nextTick(() => {
          that.mainPageHandleStyle()
        })
      })()
    })
  },
  destroyed: function () {
    // this.clearIntervalShowInfo()
  },
  methods: {
    ...mapActions('common', [
      'handleCollapse'
    ]),
    ...mapActions('menu', [
      'getMenuPermission'
    ]),
    ...mapActions('user', [
      'getWritePermission'
    ]),
    ...mapActions('dict', [
      'sysDictLoadByPaging'
    ]),
    mainPageHandleStyle () { // 动态修改样式
      if (this.$refs.container) {
        // this.$refs.mainPage.$el.style.height = this.clientHeight - this.headerHeight - 61 + 'px' // 61 rootMenu 的高度
        this.$refs.container.$el.style.height = document.documentElement.clientHeight + 'px'
      }
    },
    // clearIntervalShowInfo () { // 清除定时器(必须)
    //   clearInterval(this.timer)
    //   this.timer = null
    // },
    // intervalSleep (q) { // 定时器
    //   const { cb = () => {}, ms = 120 * 1000 } = q
    //   return new Promise((resolve, reject) => {
    //     this.timer = window.setInterval(() => {
    //       cb()
    //       resolve()
    //     }, ms * 1000)
    //   })
    // }
  }
}
</script>

<style lang="scss">
.scp-container {
  .el-scrollbar {
    height: 100%;
  }
  .el-scrollbar-container{
    height: 100%;
    width: 100%;
    .el-scrollbar__wrap {
      overflow-x: auto
    }
  }
  .el-main {
    padding: 0px !important;
  }
}

</style>



